<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <h2>{{title}}</h2>
        <h2>msg--{{msg}}</h2>
        <p><input type="text" v-model.lazy.number.trim="msg"></p>
        <h2>text--{{text}}</h2>
        <div><textarea v-model="text"></textarea></div>
        <div>
            <label for="agree">
                <input type="checkbox" id="agree" v-model="agree">
                请先同意我们的霸王条款再注册 - {{agree}}
            </label>
        </div>
        <div>
            <h2>你的爱好是</h2>
            <p><input type="checkbox" value="Game" v-model="checkes">游戏</p>
            <p><input type="checkbox" value="Movie" v-model="checkes">电影</p>
            <p><input type="checkbox" value="Book" v-model="checkes">看书</p>
            <p>{{checkes}}</p>
        </div>

        <div>
            <h2>性别</h2>
            <p><input type="radio" value="1" v-model="pick">男性</p>
            <p><input type="radio" value="0" v-model="pick">女性</p>
            <p>{{pick}}</p>
        </div>
        <div>
            <h2>城市</h2>
            <select v-model="choose">
                <option :value="v.code" v-for="(v,i) in cities" :key="i">
                    {{v.name}}
                </option>
            </select>
            <h3>你的期待：{{choose}}</h3>
        </div>

        <div>
            <h2>动态的值绑定</h2>
            <p>
                <input type="checkbox"
                v-model="toggle"
                :true-value="yes"
                :false-value="no"
                >{{toggle}}
            </p>

            <div>
                <p>喜欢的宠物</p>
                <p><input type="radio" v-model="love" :value="a">猫</p>
                <p><input type="radio" v-model="love" :value="b">狗</p>
                <p><input type="radio" v-model="love" :value="c">蛇</p>
                <p>宠物：{{love}}</p>
            </div>

        </div>

    </div>

    <script>
        const vm = new Vue({
            data: {
                title: 'v-model 数据双向绑定',
                msg: '端午吃粽子啦',
                text: '它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理',
                agree: true,
                checkes: [],
                pick: '',
                cities: [
                    {
                        name: '北京',
                        code: "BJ"
                    },
                    {
                        name: '成都',
                        code: "CD"
                    },
                    {
                        name: '武汉',
                        code: "WH"
                    },
                    {
                        name: '上海',
                        code: "SH"
                    },
                    {
                        name: '拉萨',
                        code: "LS"
                    }
                ],
                choose: '',
                toggle: true,
                yes: '端午要放假了',
                no: '还是不放了吧',
                love: '',
                a: 'cat',
                b: 'dog',
                c: 'snake'
            },

        }).$mount('#app')
        console.log({})
        // Object.defineProperty 监听对象的值改变
        var user = {
            name:'123',
            age:'8'
        }
        Object.defineProperty(user,'name',{
            // 读取值会进入这个函数
            get(){
                console.log('user.name 被读取了--');
            },
            // 监听值得改变  表单事件
            
            set(v){
                console.log('set--====='+v);
            }
        })

    </script>
     <!-- 
        v-model  用于绑定 input 和 textarea 的 value  输入框 

        语法糖

        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


        v-model 实现数据双向绑定
        view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
        model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)

        Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点

        设计模式   
        MVC        angularJS  
        M  model 数据层
        V  view  视图层
        C  controller 控制器层   

        MVVM   
        M  model 数据层
        V  views 视图层
        VM viewmodel  数据视图对象  

        MVP  
        M  model 数据层
        V  views 视图层
        P  presenter  逻辑层  (js逻辑处理代码+方法)

        v-model 的底层原理   语法糖
        Object.defineProperty()  进行数据劫持  (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)

        它会根据控件类型自动选取正确的方法来更新元素  
        v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
        负责监听用户的输入事件以更新数据

        text 和 textarea 元素使用 value 属性和 input 事件
        checkbox 和 radio 使用 checked 属性和 change 事件    
        select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()

        v-model 也有修饰符 
        lazy    input 变为 change 延迟触发 
        trim    去除首尾空格
        number  用户的输入值转为数值类型


        在组件上使用 v-model

     -->
</body>

</html>